<template>
  <div class="dashboard-view">
    <el-card>
      <template slot="header">
        我的数据
      </template>
      <el-row class="head-card" :gutter="20">
        <el-col :span="6">
          <router-link to="/server">
            <el-card>
              <h3>服务器数量 {{ record.serverCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="/stream">
            <el-card>
              <h3>数据流数量 {{ record.streamCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="/error_history">
            <el-card>
              <h3>产生告警数 {{ record.errorCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="/application">
            <el-card>
              <h3>已创建应用 {{ record.appCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="this.$store.state.user.isAdmin">
      <template slot="header">
        服务器总数据
      </template>
      <el-row class="head-card" :gutter="20">
        <el-col :span="6">
          <router-link to="/server">
            <el-card>
              <h3>服务器数量 {{ adminRecord.serverCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="/stream">
            <el-card>
              <h3>数据流数量 {{ adminRecord.streamCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="/error_history">
            <el-card>
              <h3>产生告警数 {{ adminRecord.errorCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
        <el-col :span="6">
          <router-link to="/application">
            <el-card>
              <h3>已创建应用 {{ adminRecord.appCount }}</h3>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>


<script>
  export default {
    name: 'dashboard-view',
    data() {
      return {
        timer: 0,
        record: {
          serverCount: 0,
          streamCount: 0,
          errorCount: 0,
          appCount: 0,
        },
        adminRecord: {
          serverCount: 0,
          streamCount: 0,
          errorCount: 0,
          appCount: 0,
        },
      }
    },
    methods: {
      loadData() {
        this.$httpGet('/status').then((response) => {
          this.record = response.data
        }).catch(() => {})
        if (this.$store.state.user.isAdmin) {
          this.$httpGet('/status_all').then((response) => {
            this.adminRecord = response.data
          }).catch(() => {})
        }
        clearTimeout(this.timer)
        // this.timer = setTimeout(() => {
        //   this.loadData()
        // }, 1000 * 10)
      },
    },
    created() {
      this.loadData()
    },
    beforeRouteLeave(to, from, next) {
      clearTimeout(this.timer)
      next()
    }
  }
</script>


<style lang="scss">
  .dashboard-view {
    width: 100%;
    .head-card {
      .el-card {
        color: #909399;
        cursor: pointer;
        &:hover {
          box-shadow: 0 0 20px #c8c8c8;
          color: #409EFF;
        }
      }
    }
    .body-server {
      margin-top: 20px;
    }
    #device-online-situation,
    #device-breakdown-situation {
      width: 100%;
      height: 185px;
    }
    .el-card {
      margin-bottom: 40px;
      .el-card__header {
        border-color: transparent;
      }
    }
  }
</style>
